<template>
  <div>
    <div style="margin-bottom:10px">
      <el-input placeholder="请输入用户ID" v-model="userId" style="width:150px;margin-right:10px" />
      <el-button type="primary" @click="initData()">查找</el-button>
    </div>
    <!-- 表格列表 -->
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column label="地址ID" prop="id" width="70">
      </el-table-column>
      <el-table-column label="用户ID" prop="userId" width="70">
      </el-table-column>
      <el-table-column label="签收人" prop="consignee">
      </el-table-column>
      <el-table-column label="手机号" prop="phone">
      </el-table-column>
      <el-table-column label="省份" prop="province">
      </el-table-column>
      <el-table-column label="城市" prop="city">
      </el-table-column>
      <el-table-column label="区/县" prop="county">
      </el-table-column>
      <el-table-column label="地址详情" prop="address">
      </el-table-column>
    </el-table>
    <Paging v-bind="pageData" @pageChang='pageChangs'></Paging>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import Paging from "@/components/Paging/Paging.vue";
export default {
  data() {
    return {
      tableData: [],
      userId: '',
      pageData: {  //分页数据
        total: 0, //总条数
        currentPage: 1,  //页数
        pageSize: 10  //每页条数
      }

    }
  },
  methods: {
    initData() {
      post({ _gp: 'admin.address', _mt: 'list', userId: this.userId, page: this.pageData.currentPage, limit: this.pageData.pageSize }).then(res => {
        console.log(res);
        if (200 == res.errno) {
          this.pageData.total = res.data.total
          this.tableData = res.data.items
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    pageChangs(e) {
      Object.assign(this.pageData, e)
      this.initData()
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style>
</style>